<template>
  <div class="board-container bg-dark rounded-xl p-4 shadow-lg mb-6">
    <div class="grid-board">
      <div 
        v-for="(cell, index) in game.board" 
        :key="index" 
        :class="cellClass(cell, game.winningCells.includes(index))"
        @click="handleCellClick(index)"
        :disabled="!game.gameActive || cell !== ''"
      >
        {{ cell }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGameStore } from '../stores/gameStore'
import { computed } from 'vue'

const game = useGameStore()

const handleCellClick = (index: number) => {
  game.makeMove(index)
}

const cellClass = computed(() => (cellValue: string, isWinning: boolean) => {
  let classes = ['cell', 'bg-white', 'rounded-lg', 'shadow-md', 'transition-all', 'duration-300']
  
  if (cellValue === 'X') classes.push('text-primary', 'font-bold')
  if (cellValue === 'O') classes.push('text-secondary', 'font-bold')
  if (isWinning) classes.push('bg-accent/20', 'scale-105')
  
  return classes.join(' ')
})
</script>

<style scoped>
.cell {
  cursor: pointer;
}

.cell:not(.bg-accent\/20):hover {
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
</style>